<template>
  <div class="detail-container">
    <div class="detail-header">
      <div class="title">
        申请ID：{{ detailInfo.id }}
        <!-- <span class="dot" /> -->
        <span class="status"
          ><dict-tag
            :options="bus_approval_status"
            :value="detailInfo.approvalStatus"
        /></span>
      </div>
      <el-button
        type="primary"
        plain
        size="large"
        @click="handleViewAccount"
        v-if="false"
      >
        查看账户
      </el-button>
    </div>
    <el-divider />
    <!-- 申请信息 -->
    <div class="section">
      <div class="section-title">单据信息</div>
      <el-descriptions :column="4" border>
        <el-descriptions-item label="申请ID" :span="2" label-align="right">
          {{ detailInfo.id }}
        </el-descriptions-item>
        <el-descriptions-item label="媒体平台" :span="2" label-align="right">
          <dict-tag :options="bus_system_type" :value="detailInfo.systemType" />
        </el-descriptions-item>
        <el-descriptions-item label="申请时间" :span="4" label-align="right">
          {{ detailInfo.createTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 下户信息 -->
    <div class="section" v-if="false">
      <div class="section-title">下户信息</div>
      <el-table
        :data="accounts"
        border
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#F5F7FA' }"
      >
        <el-table-column prop="index" label="序号" width="80" align="center" />
        <el-table-column
          prop="accountId"
          label="账号ID"
          min-width="200"
          align="center"
        />
        <el-table-column
          prop="accountName"
          label="账号名称"
          min-width="200"
          align="center"
        />
        <el-table-column
          prop="status"
          label="开户状态"
          min-width="160"
          align="center"
        />
      </el-table>
    </div>

    <!-- 账户信息 -->
    <div class="section">
      <div class="section-title">账户信息</div>
      <GoogleView
        v-if="applyPlatform.GOOGLE === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></GoogleView>
      <BingView
        v-if="applyPlatform.BING === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></BingView>
      <MetaView
        v-if="applyPlatform.META === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></MetaView>
      <CriteoView
        v-if="applyPlatform.CRITEO === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></CriteoView>
      <TiktokView
        v-if="applyPlatform.TIKTOK === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></TiktokView>
      <MediagoView
        v-if="applyPlatform.MEDIAGO === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></MediagoView>
      <OutbrainView
        v-if="applyPlatform.OUTBRAIN === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></OutbrainView>
      <PinView
        v-if="applyPlatform.PIN === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></PinView>
      <TaboolaView
        v-if="applyPlatform.TABOOLA === detailInfo.systemType"
        :accountInfo="detailInfo"
      ></TaboolaView>
      <CommonView
        v-if="
          applyPlatform.YANDEX === detailInfo.systemType ||
          applyPlatform.SANPCHAT === detailInfo.systemType ||
          applyPlatform.TWITTER === detailInfo.systemType ||
          applyPlatform.LINKEDIN === detailInfo.systemType
        "
        :accountInfo="detailInfo"
      ></CommonView>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { onMounted } from "vue";
import { getApplyAccountDetail } from "@/api/apply/index.js";
import { applyPlatform } from "@/const/index.ts";

import GoogleView from "./components/detail/google.vue";
import BingView from "./components/detail/bing.vue";
import MetaView from "./components/detail/meta.vue";
import TiktokView from "./components/detail/tiktok.vue";
import CriteoView from "./components/detail/criteo.vue";
import MediagoView from "./components/detail/mediago.vue";
import OutbrainView from "./components/detail/outbrain.vue";
import PinView from "./components/detail/pin.vue";
import TaboolaView from "./components/detail/taboola.vue";
import CommonView from "./components/detail/common.vue";

const { proxy } = getCurrentInstance();

const { bus_system_type, bus_approval_status, bus_currency_type } =
  proxy.useDict("bus_system_type", "bus_approval_status", "bus_currency_type");

const route = useRoute();

const detailInfo = ref({});

function handleViewAccount() {
  // 占位：跳转到账户页（按你的路由改造）
  // _router.push({ name: "account-detail", params: { id: accounts[0].accountId } })
}

function fetchDetail() {
  getApplyAccountDetail(route.query.id).then((res) => {
    detailInfo.value = res.data;
  });
}
onMounted(() => {
  fetchDetail();
});
</script>

<style scoped lang="scss">
.detail-container {
  background: #fff;
  margin: 20px;
  padding-bottom: 20px;
  border-radius: 8px;
  border: #dcdfe6 solid 1px;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px;

  .title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dot {
    width: 8px;
    height: 8px;
    background-color: #ff4d4f;
    border-radius: 50%;
    display: inline-block;
  }

  .status {
    font-size: 12px;
    color: #333;
  }
}

.section {
  margin: 0 20px;
  .section-title {
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0;
    color: #333;
  }
}

.license-box {
  padding: 8px 0;
  .license-placeholder {
    width: 120px;
    height: 120px;
    background: #f0f2f5;
    border: 1px solid #e5e7eb;
  }
}
</style>
